<template>
  <div v-show="dialogVisible" class="dialog-mask" style="position:fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;background-color: rgba(0, 0, 0, 0.5);height: 100%;">
    <div class="dialog-container" style="position:fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: auto;height: 100%;">
      <div class="dialog-content">
        <div class="dialog-main">
          <div class="dialog-main-left">
            <div class="search-box"><el-input v-model="keywords" placeholder="搜索" type="search" clearable/></div>
            <div class="cvs-list">
              <div class="cvs-item" v-for="cvs in cvsList" @click="scanDialog(cvs)">
                <span class="cvs-unread" v-show="cvs.unreadCount>0">{{cvs.unreadCount}}</span>
                <img :src="cvs.logo" class="cvs-logo" alt=""/>
                <div class="cvs-info">
                  <div class="cvs-info-1">
                    <span>{{cvs.alias ? cvs.alias:cvs.title}}</span>
                    <span class="cvs-info-time">{{handMsgTimeView(cvs.latestTime)}}</span>
                  </div>
                  <div v-if="cvs.msg.category===1" class="cvs-info-2">
                    <span>{{ cvs.msg.subject.length>30?cvs.msg.subject.substring(0,27)+"...":cvs.msg.subject }}</span>
                  </div>
                  <div v-else-if="cvs.msg.category===2">
                    <span>[图片消息]</span>
                  </div>
                  <div v-else-if="cvs.msg.category===3">
                    <span>[语音消息]</span>
                  </div>
                  <div v-else-if="cvs.msg.category===4">
                    <span>[视频消息]</span>
                  </div>
                  <div v-else>
                    <span>不支持的消息类型</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="width: 70%">
            <div style="height: 66px;display: flex;justify-content: space-between">
              <div style="padding-top: 12px;padding-left: 12px;font-size: 18px" v-show="crt.title">与{{crt.alias ? crt.alias:crt.title}}交流中</div>
              <span @click="handleClose()" style="padding:8px 8px 6px 6px;font-size: 14px;cursor: pointer;height: 14px">X</span>
            </div>
            <div  style="height: calc(100% - 250px);padding: 8px">
              <div v-for="item in crt.details">
                <div v-if="item.sendId === crt.userId">
                  <img :src="crt.logo" style=" height: 40px;width: 40px;border-radius: 50%;" alt="">
                  <div v-if="item.category===1">{{item.subject}}</div>
                  <div v-else>{{item.subject}}</div>
                </div>
                <div v-else>
                  <img :src="item.sendAvatar" style=" height: 40px;width: 40px;border-radius: 50%;" alt=""><span>{{item.sendName}}</span>
                  <div v-if="item.category===1">{{item.subject}}</div>
                  <div v-else>{{item.subject}}</div>
                </div>
              </div>
            </div>
            <div style="height: 184px">第三部分</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default  {
  name: "msg",
  data() {
    return {
      "dialogVisible": true,
      "msg": "通过模板路由引入的首页组件",
      "count":5,
      "keywords":'',
      "crt":{
        "id":2,"category":1,"userId":1,"groupId":1,"title":"丁灵","alias":null,"latestTime":1694506412768,"unreadCount":0,
        "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg","sponsorId":1,"relatedId":1,"createTime":1694506412768,
        "msg":{
          "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
          "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
        },
        "details":[
          {
            "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          },
          {
            "id":1,"sendId":1,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"你好,我是你的小助理,后面有需要可以联系我","relatedId":null,"status":1,"createTime":1694506412768
          },
        ]
      },
      "cvsList":[
        {
          "id":2,"category":1,"userId":1,"groupId":1,"title":"丁灵","alias":null,"latestTime":1694506412768,"unreadCount":0,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          },
          "details":[
            {
              "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
              "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
            },
            {
              "id":1,"sendId":1,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
              "groupId":1,"category":1,"subject":"你好,我是你的小助理,后面有需要可以联系我","relatedId":null,"status":1,"createTime":1694506412768
            },
          ]
        },
        {
          "id":4,"category":1,"userId":1,"groupId":1,"title":"毛敏","alias":null,"latestTime":1694506412768,"unreadCount":1,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.png","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"毛敏","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.jpg",
            "groupId":1,"category":1,"subject":"我是毛敏,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },{
          "id":2,"category":1,"userId":1,"groupId":1,"title":"丁灵","alias":null,"latestTime":1694506412768,"unreadCount":0,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },
        {
          "id":4,"category":1,"userId":1,"groupId":1,"title":"毛敏","alias":null,"latestTime":1694506412768,"unreadCount":1,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.png","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"毛敏","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.jpg",
            "groupId":1,"category":1,"subject":"我是毛敏,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },{
          "id":2,"category":1,"userId":1,"groupId":1,"title":"丁灵","alias":null,"latestTime":1694506412768,"unreadCount":0,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },
        {
          "id":4,"category":1,"userId":1,"groupId":1,"title":"毛敏","alias":null,"latestTime":1694506412768,"unreadCount":1,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.png","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"毛敏","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.jpg",
            "groupId":1,"category":1,"subject":"我是毛敏,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },{
          "id":2,"category":1,"userId":1,"groupId":1,"title":"丁灵","alias":null,"latestTime":1694506412768,"unreadCount":0,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"丁灵","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/丁灵.jpg",
            "groupId":1,"category":1,"subject":"我是丁灵,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        },
        {
          "id":4,"category":1,"userId":1,"groupId":1,"title":"毛敏","alias":null,"latestTime":1694506412768,"unreadCount":1,
          "logo":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.png","sponsorId":1,"relatedId":1,"createTime":1694506412768,
          "msg":{
            "id":1,"sendId":2,"sendName":"毛敏","sendAvatar":"https://angefile.jahosp.com/www/server_pic/staff_head_img/毛敏.jpg",
            "groupId":1,"category":1,"subject":"我是毛敏,我已经同意你的好友请求。","relatedId":null,"status":1,"createTime":1694506412768
          }
        }
      ]
    }
  },
  methods: {
    scanDialog(cvs){
      console.log(cvs);
      console.log("别点我")
    },
    handMsgTimeView(time){
      const diff = new Date().getTime()-time;
      if(diff<60*1000){
        return '刚刚'
      }else if(diff<60*60*1000){
        return (diff/(60*1000))+"分钟前";
      }else {
        const now = new Date();
        const date = new Date(time);
        if (date.getFullYear() === now.getFullYear()&&date.getMonth()===now.getMonth()&&date.getDate()===now.getDate()){
          let hours = date.getHours();
          let minutes = date.getMinutes();
          if (hours < 10) hours = '0' + hours
          if (minutes < 10) minutes = '0' + minutes
          return  hours + ':' + minutes ;
        }else {
          let month = date.getMonth() + 1;
          let _date = date.getDate();
          if (month < 10) month = '0' + month
          if (_date < 10) _date = '0' + _date
          return  month + '月' + _date+"号";
        }
      }
    },
    handleOpen(){
      this.dialogVisible = true;
    },
    handleClose(){
      this.dialogVisible = false;
    },
    addCount() {
      this.$store.commit('increment');
    },
    switchTab(btnId){
      console.log(btnId);
      this.$router.push({name:"/login",params:{id:btnId}})
    }
  }
}
</script>

<style scoped>

</style>